<template>
  <div id="commentSetting">
    <h1 class="con-right-title">
      自动评论设置
    </h1>
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="参数ID" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column prop="name" label="参数名称" min-width="140">
      </el-table-column>
      <el-table-column label="参数键值" min-width="180">
        <template slot-scope="{ row }">
          <div v-if="row.paramsType === 'range'">
            <el-input-number
              v-model.number="resData[row.nameType + 'CountLowerLimit']"
              :disabled="!row.editFlag"
              size="mini"
              :min="rules[row.nameType].min"
              :max="rules[row.nameType].max"
              :controls="false"
            ></el-input-number>
            -
            <el-input-number
              v-model.number="resData[row.nameType + 'CountUpperLimit']"
              :disabled="!row.editFlag"
              size="mini"
              :min="rules[row.nameType].min"
              :max="rules[row.nameType].max"
              :controls="false"
            ></el-input-number>
            个
          </div>
          <div v-if="row.paramsType === 'time'">
            <el-input-number
              v-model.number="resData[row.nameType + 'DelayTime']"
              :disabled="!row.editFlag"
              size="mini"
              :min="rules[row.nameType].min"
              :max="rules[row.nameType].max"
              :controls="false"
            ></el-input-number>
            秒
          </div>
          <div v-if="row.paramsType === 'multiple'">
            <el-checkbox-group
              v-model="resData[row.nameType]"
              :disabled="!row.editFlag"
            >
              <checkList :list="getCheckList(row.nameType)"></checkList>
            </el-checkbox-group>
          </div>
          <div v-if="row.paramsType === 'radio'">
            <el-radio-group
              v-model="resData[row.nameType]"
              :disabled="!row.editFlag"
            >
              <el-radio
                v-for="item in radioList"
                :label="item.dictValue"
                :key="item.dictValue"
                >{{ item.dictLabel }}</el-radio
              >
            </el-radio-group>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="180">
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template slot-scope="scope">
          <template v-permission="'wh:system:commentSetting:edit'">
            <el-button
              v-if="
                scope.row.editFlag === undefined || scope.row.editFlag === false
              "
              type="text"
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.editFlag"
              type="text"
              @click="apply(scope.row)"
            >
              应用
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList, applyList } from '@/api/autoComment/commentSetting' // 接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
import checkList from '@component/autoComment/commentSetting/checkList'
export default {
  name: 'autoComment',
  msg: '帖子自动维护/自动评论设置',
  components: {
    checkList
  },
  data() {
    return {
      loading: false,
      tableData: [
        {
          name: '自动加赞数量设置',
          nameType: 'autoAddLike',
          paramsType: 'range',
          remark: '取值范围1-10个',
          validator: true,
          editFlag: false
        },
        {
          name: '自动加赞时间设置',
          nameType: 'addLike',
          paramsType: 'time',
          remark: '取值范围5-100秒',
          validator: true,
          editFlag: false
        },
        {
          name: '自动分享数量设置',
          nameType: 'autoAddShare',
          paramsType: 'range',
          remark: '取值范围1-100个',
          validator: true,
          editFlag: false
        },
        {
          name: '自动评论数量设置',
          nameType: 'autoAddComment',
          paramsType: 'range',
          remark: '取值范围1-5个',
          validator: true,
          editFlag: false
        },
        {
          name: '自动评论时间设置',
          nameType: 'addComment',
          paramsType: 'time',
          remark: '取值范围5-100秒',
          validator: true,
          editFlag: false
        },
        {
          name: '评论马甲设置',
          nameType: 'vestType',
          paramsType: 'multiple',
          remark: '可勾选，用于自动评论',
          validator: false,
          editFlag: false
        },
        {
          name: '自动维护设置',
          nameType: 'auto',
          paramsType: 'radio',
          remark: '',
          validator: false,
          editFlag: false
        },
        {
          name: '自动维护栏目',
          nameType: 'autoType',
          paramsType: 'multiple',
          remark: '可勾选，用于栏目使用选择',
          validator: false,
          editFlag: false
        }
      ], // 表格数据
      rules: {
        autoAddLike: {
          //自动加赞数量设置
          min: 1,
          max: 10
        },
        addLike: {
          //自动加赞时间设置
          min: 5,
          max: 100
        },
        autoAddShare: {
          //自动分享数量设置
          min: 1,
          max: 100
        },
        autoAddComment: {
          //自动评论数量设置
          min: 1,
          max: 5
        },
        addComment: {
          //自动评论时间设置
          min: 5,
          max: 100
        }
      },
      resData: {}, //接口返回对象
      vestTypeList: [], //评论马甲设置
      autoTypeList: [], //频道
      radioList: [
        { dictValue: true, dictLabel: '开启' },
        { dictValue: false, dictLabel: '关闭' }
      ], //自动评论设置
      hasEdit: false,
      canShowPage: false,
      powerAry: [],
      powerStr: 'system:commentSetting:list'
    }
  },
  mounted() {
    this.searchList()
    this.getStatusList()
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      getList(
        (response) => {
          this.loading = false
          this.resData = { ...response }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          this.loading = false
        }
      )
    },
    /* 获取数据状态 */
    async getStatusList() {
      // 评论马甲设置
      this.vestTypeList = await sysNormalDisable('auto_vest_setting')
      //频道
      this.autoTypeList = await sysNormalDisable('auto_setting_channel')
    },
    getCheckList(name) {
      let str = name + 'List'
      return this[str]
    },
    /* 编辑 */
    edit(row) {
      if (this.hasEdit) {
        this.$message.error('只可编辑一条')
        return
      }
      this.hasEdit = row.editFlag = row.editFlag ? false : true
    },
    /*应用*/
    apply(row) {
      let flog = true
      if (row.validator) {
        //校验取值范围
        let name = row.nameType
        let min = this.rules[name].min
        let max = this.rules[name].max
        switch (row.paramsType) {
          case 'time':
            let value = this.resData[row.nameType + 'DelayTime']
            flog = value >= min && value <= max ? true : false
            break
          case 'range':
            let valMin = this.resData[row.nameType + 'CountLowerLimit']
            let valMax = this.resData[row.nameType + 'CountUpperLimit']
            let inRangeMin = valMin >= min && valMin <= max ? true : false
            let inRangeMax = valMax >= min && valMax <= max ? true : false
            if (valMin > valMax || !inRangeMin || !inRangeMax) {
              flog = false
            }
            break
        }
      }
      if (!flog) {
        this.$message.warning('取值范围有误！')
        return
      }
      let obj = { ...this.resData }
      applyList(
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.searchList()
          this.hasEdit = row.editFlag = row.editFlag ? false : true
        },
        (response) => {
          this.$message.warning('操作失败，' + response.message)
        }
      )
    }
  }
}
</script>

<style lang="less">
#commentSetting {
  .el-input-number.el-input-number--mini {
    width: 60px;
    height: 30px;
    padding: 0 !important;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label,
  .el-radio__input.is-checked + .el-radio__label {
    color: #0d1636;
  }
}
</style>
